<template>
  <div
    v-if="fullScreenComp === 2"
    class="aircraft-video-card"
    :class="[isShowAircraftComp ? 'right_360':'right_20', nestInfo.nest_type_id === 2 ? 'bottom_660':'bottom_450']"
  >
  <div class="cameraBox" v-if="nestInfo.nest_factory_code=='DJI' && nestInfo.flight_aircraft.aircraft_type!='Matrice 30'">
    <div class="current_camera">
      <span v-if="lightType=='wide'||lightType=='zoom'">可见光</span> 
      <span v-else>红外光</span>
    </div>
    <div class="cameralist">
      <div
                v-for="(item, index) in lightTypeList"
                :key="index"
                :class="lightType == item.id ? 'selectList' : ''"
                @click.prevent="changHongOrLight(item)"
              >
                {{ item.name }}
              </div>
    </div>
  </div>
  <div class="shareCardBox">
    <div v-if="isSharing" class="share-info">分享中</div>
    <div v-if="isSharing" class="share-info">{{ playerTimes < 99 ? playerTimes : '99+' }}</div>
    <i v-if="isSharing" class="el-icon-switch-button" style="margin:0px 8px;cursor: pointer" @click="closeShare"></i>
    <div style="flex:1"></div>

    <el-dropdown v-if="isDaji" placement="top" @command="handleCommand">
      <!-- 显示 -->
      <span class="el-dropdown-link">
        {{ currentQuality.name }}
      </span>
      <!-- 选项 -->
      <el-dropdown-menu slot="dropdown" class="quality-menu">
        <el-dropdown-item
          class="quality-item"
          :command="qualityList[0]"
          :class="currentQuality.id ===qualityList[0].id?'selected-item':''">
          {{ qualityList[0].name }}
        </el-dropdown-item>
        <el-dropdown-item
          class="quality-item"
          :command="qualityList[1]"
          :class="currentQuality.id ===qualityList[1].id?'selected-item':''">
          {{ qualityList[1].name }}
        </el-dropdown-item>
        <el-dropdown-item
          class="quality-item"
          :command="qualityList[2]"
          :class="currentQuality.id ===qualityList[2].id?'selected-item':''">
          {{ qualityList[2].name }}
        </el-dropdown-item>
        <el-dropdown-item
          class="quality-item"
          :command="qualityList[3]"
          :class="currentQuality.id ===qualityList[3].id?'selected-item':''">
          {{ qualityList[3].name }}
        </el-dropdown-item>
        <el-dropdown-item
          class="quality-item"
          :class="currentQuality.id ===qualityList[4].id?'selected-item':''"
          :command="qualityList[4]">
          {{ qualityList[4].name }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <svg-icon class="btn_enter" icon-class="brush" @click="refreshAircraftVideo()"/>
    <svg-icon class="btn_enter" icon-class="share-square-o" @click="showShareForm()"/>
  </div>
</div>
</template>

<script>

import {liveSetQuality, requestVideoPlayTimes,liveLensChange} from "@/api/flycontrol";
import store from "@/store";

const QUALITY_LIST = [
  {
    id: '0',
    name: '智能'
  }, {
    id: '1',
    name: '流畅'
  }, {
    id: '2',
    name: '标清'
  }, {
    id: '3',
    name: '高清'
  }, {
    id: '4',
    name: '超清'
  }]
export default {
  name: 'AircraftVideoActionBar',
  props: {
    fullScreenComp: {
      type: Number,
      default: () => 0
    },
    isShowAircraftComp: {
      type: Boolean,
      default: () => true
    },
    aircraftSocketInfo: {
      type: Object,
      default: () => null
    },
    nestInfo: {
      type: Object,
      default: () => null
    },
    isSharing: {
      type: Boolean,
      default: () => false
    },
    shareUrl: {
      type: String,
      default: () => ''
    },
    recordId: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      currentQuality: QUALITY_LIST[0],
      qualityId: '0',
      qualityList: QUALITY_LIST,
      //
      intervalId: '',
      timer: 10,
      playerTimes: 0,
      lightType: "wide", //相机类型(变焦就是可见光) "wide":"广角","ir":"红外","zoom":变焦
      lightTypeList: [
        {
          id: "wide",
          name: "可见光",
        },
        {
          id: "ir",
          name: "红外光",
        }
      ],
    }
  },
  computed: {
    isDaji() {
      return (
        this.nestInfo.nest_type_id === 10 || this.nestInfo.nest_type_id === 11
      )
    }
  },
  watch: {
    isSharing(val) {
      console.log('isSharingisSharing1', val)
      if (val) {
        console.log('isSharingisSharing2', this.timer)
        this.intervalId && clearInterval(this.intervalId)
        this.intervalId = setInterval(() => {
          if (this.timer === 10) {
            console.log('isSharingisSharing3', this.timer)
            this.requestShareTimes()
          }
          if (this.timer > 0) {
            this.timer--
          } else {
            this.timer = 10
          }
        }, 1000)
      } else {
        clearInterval(this.intervalId)
      }
    },
    aircraftSocketInfo(val){
      var _this=this;
if(val){
  
   // 镜头模式
   if (val.device_list && val.device_list.length == 2) {
        if (val.device_list && val.device_list.length == 2) {
          _this.lightType = val.device_list[1].video_type;
        } else {
          _this.lightType = "wide";
        }
      }
}
    }
  },
  beforeDestroy() {
    clearInterval(this.intervalId)
  },
  methods: {
    changHongOrLight(item){
      
      var _this=this;
      _this.lightType = item.id;
      liveLensChange({
        user_id: _this.$store.getters.userId,
        factory: "DJI",
        nest_code: _this.nestInfo.nest_code,
        video_type: item.id,
        action: 1,
      }).then((res) => {
        if (res.error_code == 0) {
          _this.$message({
            message: res.msg,
            type: "success",
          });
        } else {
          _this.$message({
            showClose: true,
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    async requestShareTimes() {
      console.log('requestShareTimes', this.nestInfo)
      const res2 = await requestVideoPlayTimes({
        url: this.shareUrl,
        record_id: this.recordId
      })
      console.log('requestShareTimes', res2)
      if (res2 && res2.error_code === 0) {
        this.playerTimes = res2.data.count
      }
    },

    showShareForm() {
      this.$emit('showShareCard')
    },
    refreshAircraftVideo() {
      this.$emit('refreshVideo')
    },

    closeShare() {
      this.$emit('closeShare')
    },

    handleCommand(item) {
      this.currentQuality = item
      //
      if (!this.nestInfo || !this.nestInfo.nest_code) {
        return false
      }
      //
      liveSetQuality({
        user_id: store.getters.userId,
        factory: 'DJI',
        nest_code: this.nestInfo.nest_code,
        video_quality: item.id,
        action: 1
      }).then(res => {
        if (res && res.error_code === 0) {
          this.$message({showClose: true, message: res.msg, type: 'success'})
          this.currentQuality = item
        } else {
          this.$message({showClose: true, message: res.msg, type: 'warning'})
        }
      }).catch(e => {
        this.$message({showClose: true, message: '访问失败，请稍后重试', type: 'error'})
      })
    }
  }
}
</script>

<style scoped lang="scss">
.aircraft-video-card {

  
  position: absolute;
  
  display: flex;

 
  z-index: 2;
 
  .shareCardBox{
  display: flex;
  background: rgba(5, 29, 40, 0.7);
  border-bottom: 2px solid #ffffff;
  border-radius: 10px;
  color: white;
  padding: 5px;
  padding: 10px;
  // width: 320px;
  height: 50px;
  pointer-events: auto;
  align-items: center;
  flex-direction: row;
}
.cameraBox{
  pointer-events: auto;
  position: relative;
  font-size: 14px;
    margin-right: 5px;
  .current_camera{
    background: rgba(5, 29, 40, 0.7);
    border-bottom: 2px solid #ffffff;
    border-radius: 10px;
    color: #1cc1ff;
    padding: 5px;
    padding: 10px;
    height: 50px;
    display: flex;
    align-items: center;
    width: 70px;
   cursor: pointer;
  }
  .cameralist{
    position: absolute;
    bottom:45px;
    width: 70px;
    line-height: 40px;
    text-align: center;
    
    color: #ffffffbd;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    display: none;
    padding-bottom: 10px;
    >div{
      background: rgba(5, 29, 40, 0.9);
      
    }
    >div:last-child{
      border-radius: 0 0 10px 10px;
    }
    .selectList{
      background: #0d4271;
    }
  }
}
.cameraBox:hover .cameralist{
  display: block;
}
  .btn_enter {
    cursor: pointer;
    color: #1cc1ff;
    margin-left: 6px;
    width: 20px;
    height: 20px;
  }

  .share-info {
    font-size: 13px;
    margin-left: 6px;
  }

}

.right_360 {
  right: 360px;
}

.right_20 {
  right: 20px;
}

.bottom_450 {
  bottom: 450px;
}

.bottom_660 {
  bottom: 660px;
}

.el-dropdown-link {
  font-size: 12px;
  color: #1cc1ff;
  border: #1cc1ff 1px solid;
  padding: 1px 4px;
  border-radius: 4px;
  cursor: pointer;

  ::v-deep .el-dropdown-menu {
    background-color: red
  }
}
</style>
